<template>
  <div class="youke points">
    <van-nav-bar
      :title="`${$route.query.id}号矿点模型`"
      left-arrow
      fixed
      right-text="推荐分享"
      @click-left="onBack('/game/order')"
      @click-right="$router.push({path:'/share/index?point_id=' +$route.query.id})"
    ></van-nav-bar>
    <Main>
      <div class="games-box">
        <div class="point-trees">
          <div class="game-header-box">
            <van-row>
              <van-col span="3">
                <van-icon
                  class-prefix="iconfont iconshujumofang"
                  size="2em"
                ></van-icon>
              </van-col>
              <van-col span="13">当前矿点模型：{{$route.query.id}}号矿点</van-col>
              <van-col span="8">
                <div class="mark">
                  <div class="stop bg-red"></div>
                  <p>被占</p>
                  <div class="stop bg-blue"></div>
                  <p>空位</p>
                </div>
              </van-col>
            </van-row>
          </div>
          <div class="game-content-box point">
            <trees
              :data="treesdata"
              :horizontal="horizontal"
              :collapsable="collapsable"
              :label-class-name="labelClassName"
              :render-content="renderContent"
              :point="true"
              @on-expand="onExpand"
              @on-node-click="onNodeClick"
              :props="propsOption"
              ref="hammers"
            ></trees>
          </div>
        </div>
      </div>
      <div class="point-img">
        <div class="point-imgs">
          <img
            src="@/assets/other/f-a.gif"
            alt
            srcset
          >
        </div>
        <div
          v-if="$route.query.status"
          class="point-img_text"
        >{{$route.query.status==0?'正在匹配中':$route.query.status==1?'已完成':"已出局"}}</div>
        <div v-else></div>
      </div>
    </Main>
  </div>
</template>

<script type="text/ecmascript-6">
import trees from "@/components/common/trees";
import { games } from "@/api";
export default {
  //接收父级传递的参数
  props: [],
  //监听数据变化
  watch: {},
  data() {
    return {
      treesdata: {},
      horizontal: false,
      collapsable: false,
      expandAll: false,
      propsOption: {
        label: "label",
        expand: "expand",
        children: "zj",
        check: "uid",
        id: "id"
      }
    };
  },
  //实例初始化之前触发事件
  beforeCreate() {},
  //实例化之后触发事件
  created() {},
  //实时监控data参数数据变化
  computed: {},
  //模板组件
  components: { trees },
  //执行方法
  methods: {
    getlist() {
      games.dwmx({ dwid: this.$route.query.id }).then(res => {
        if (res.code == 1000) {
          this.treesdata = res.result;
        }
      });
    },
    getchange(data) {
      for (let i of data.zj.values()) {
        i.uid = Boolean(Number(i.uid));
        for (let j of i.zj.values()) {
          j.uid = Boolean(Number(j.uid));
        }
      }
      this.treesdata = data;
      // console.log(this.treesdata)
    },
    onExpand(data) {
      if ("expand" in data) {
        data.expand = !data.expand;

        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    onNodeClick(e, data, id) {
      // console.log(id);
      // this.createOrder(id);
    },
    renderContent(h, data) {
      return "";
    },
    labelClassName(h, data) {
      //   console.log(h, data);

      return;
    },
    collapse(list) {
      var _this = this;
      list.forEach(child => {
        if (child.expand) {
          child.expand = false;
        }

        child.children && _this.collapse(child.children);
      });
    },
    expandChange() {
      this.toggleExpand(this.data, this.expandAll);
    },
    toggleExpand(data, val) {
      var _this = this;
      if (Array.isArray(data)) {
        data.forEach(item => {
          _this.$set(item, "expand", val);
          if (item.children) {
            _this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          _this.toggleExpand(data.children, val);
        }
      }
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.getlist();
    }
  }
  //路由退出时候调用
  //beforeRouteLeave(to, from, next){next()}
};
</script>

<style scoped lang="less">
.points {
  background: #fff;
}
.games-box {
  background: #dc3829;
  padding: 6px 0px;
}
.point-trees {
  background: #fff;
  margin: 0 auto;
  position: relative;
  height: 20rem;
}
.game-header-box {
  border-bottom: 1px solid #afafaf;
  background: #fff;
  height: 2.5rem;
  line-height: 2.5rem;
  overflow: hidden;
  .van-row {
    width: 96%;
    margin: 0 auto;
  }

  .mark {
    /*bordeR:1px solid red;*/
    display: flex;
    align-items: center;
    height: 2.5rem;
    font-size: 16px;

    .stop {
      height: 0.6rem;
      width: 0.6rem;
    }

    .stop:first-child {
      background-color: #dc3829;
    }

    .stop:last-child {
      background-color: #4f89fd;
    }

    p {
      margin-left: 2px;
      margin-right: 0.5rem;
    }
  }
  .bg-red {
    background-color: #dc3829;
  }

  .bg-blue {
    background-color: #4f89fd;
  }
  .van-icon-stop {
    border: 1px solid red;
    margin-top: 0.5rem;
  }
}
.point-img {
  margin-top: 20px;
  text-align: center;
  img {
    width: 10rem;
    display: block;
    margin: 0 auto;
  }
}
.game-content-box {
  height: 15.5rem;
  overflow: auto;
  position: relative;
  display:flex;
  justify-content: center;
}
</style>
